<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<style>
    td{
        text-align: center;
    }
</style>
<body>
    
    姓名:
    <input type="text" name="" id="txt"><br>
    年龄:
    <input type="text" name="" id="e"><br>
    电话:
    <input type="text" name="" id="age"><br>
    邮箱:
    <input type="text" name="" id="td"><br>
    性别:
    <input type="text" name="" id="sd"><br>
    民族:
    <input type="text" name="" id="gf"><br>
    <button id="btn">提交</button>
    <hr/>

    姓名:<input type="search"><button>搜索</button><br><br>
    <table border="1" style="width: 500px;">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>电话</th>
                <th>邮箱</th>
                <th>性别</th>
                <th>民族</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    
</body>
<script>
    var num = 1
    $(function () {
      $('#btn').click(function () {
          var txt = $('#txt').val()
          var e = $('#e').val()
          var age = $('#age').val()
          var td = $('#td').val()
          var sd = $('#sd').val()
          var gf = $('#gf').val()
          var str = `<tr>
                         <th>${txt}</th>
                         <th>${e}</th>
                         <th>${age}</th>
                         <th>${td}</th>
                         <th>${sd}</th>
                         <th>${gf}</th>
                         <th><button>编辑</button>|<button>删除</button></th>
                    </tr>`
          $('tbody').append(str)
          console.log('btn')
      })
    })
</script>
</html>